<template>
  <view class="swiper-container">
      <u-swiper
          :interval="5000"
          height="100%"
          :list="urlList"
          indicator
          circular
          @click="handleSwiperClick"
      />
  </view>
</template>

<script>
    export default {
        name: 'Banner',
        props: {
            data: {
                type: Array,
                require: true
            }
        },
        computed: {
            urlList() {
                return this.data.map(v => v.image);
            }
        },
        methods: {
            handleSwiperClick(index) {
                const item = this.data[index];
                if (!item) return;
                const linkUrl = item.path;
                if (!linkUrl) return;
                if (linkUrl && linkUrl.indexOf('miniprogram://') !== -1) {
                    const url = linkUrl.substring(14, linkUrl.length);
                    console.log(url);
                    uni.navigateTo({
                        url: '/' + url,
                        fail(err) {
                            console.error(err);
                        }
                    });
                } else if (linkUrl.indexOf('web://') !== -1) {
                    const encoded64Url = Buffer.from(linkUrl.substring(6, linkUrl.length)).toString('base64');
                    uni.navigateTo({
                        url: '/pages/webview/index?url=' + encoded64Url,
                        fail(err) {
                            console.error(err);
                        }
                    });
                } else if (linkUrl.indexOf('third://') !== -1) {
                    const strArray = linkUrl.split('#');
                    uni.navigateToMiniProgram({
                        appId: strArray[0].substring(8),
                        path: strArray[1],
                        envVersion: 'release'
                    });
                }
            }
        }
    };
</script>

<style lang="scss">
@import "../styles/global.scss";

.swiper-container {
    width: px2rpx(380);
    height: px2rpx(200);
}
</style>
